<template>
  <div class="detail">
    <Header ref="child" />
    <div class="main">
      <div class="course-info">
        <div class="wrap-left">
          <videoPlayer
            v-if="real"
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
            @play="onPlayerPlay($event)"
          ></videoPlayer>
        </div>
      </div>
      <div class="course-tab">
        <ul class="tab-list">
          <li :class="tabIndex == 1 ? 'active' : ''" @click="tabIndex = 1">
            详情介绍
          </li>
          <li :class="tabIndex == 2 ? 'active' : ''" @click="tabIndex = 2">
            常见问题
          </li>
          <li :class="tabIndex == 3 ? 'active' : ''" @click="tabIndex = 3">
            资料下载
          </li>
        </ul>
      </div>
      <div class="course-content">
        <div class="course-tab-list">
          <div class="tab-item" v-if="tabIndex == 1">
            <div
              class="course-brief"
              v-html="course_info.detail_page.synopsis"
            ></div>
          </div>
          <div class="tab-item" v-if="tabIndex == 2">
            <span v-for="(char, index) in char_list" :key="index">
              <br class="char" />
              {{ index + 1 }}{{ "." }}{{ char }}
            </span>
          </div>
          <div class="tab-item" v-if="tabIndex == 3">
            <span v-for="(link, index) in link_list" :key="index">
              <a @click="login_up(link)" href="#">在线预览</a>
              <br />
            </span>
          </div>
        </div>
        <div class="course-side">
          <div class="teacher-info">
            <h4 class="side-title">
              <span>特约嘉宾</span>
            </h4>
            <div class="teacher-content">
              <div class="cont1">
                <img :src="course_info.sharer.user.icon" />
                <div class="name">
                  <p class="teacher-name">
                    {{ course_info.sharer.user.first_name }}
                    {{ "·" }}
                    {{ course_info.sharer.user.last_name }}
                  </p>
                  <p class="teacher-title">{{ course_info.sharer.title }}</p>
                </div>
              </div>
              <p class="narrative">{{ course_info.sharer.presentation }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header";
// 加载组件
import { videoPlayer } from "vue-video-player";

export default {
  name: "Detail",
  data() {
    return {
      tabIndex: 1, // 当前选项卡显示的下标
      course_id: 0, // 当前课程信息的ID
      char_list: "",
      link_list: "",
      real: false,
      course_info: {
        sharer: { user: {} },
        detail_page: {},
      }, // 课程信息

      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //视频倍速
        preload: "auto",
        aspectRatio: "10:5", //播放器宽高比值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        poster: "",
        sources: [
          {
            type: "video/mp4", // 播放资源和资源格式
            src: "", //你的视频地址（必填）
          },
        ],
        notSupportedMessage: "此视频暂无法播放，请联系陈鸿龙", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
        },
      },
    };
  },
  created() {
    this.get_course_id();
    this.get_course_data();
  },

  methods: {
    onPlayerPlay() {
      if (
        this.$cookies.get("token") == null ||
        this.$cookies.get("username") == null ||
        this.$cookies.get("ico") == null
      ) {
        this.$refs.videoPlayer.player.pause();
        this.$refs.child.pull_login();
        this.$notify({
          title: "请先登入",
          type: "warning",
          duration: 1500,
          // #结束事件
        });
      }
    },
    get_course_id() {
      // 获取地址栏上面的课程ID
      this.course_id = this.$route.params.pk;
      if (this.course_id < 1) {
        let _this = this;
        _this.$alert("对不起，当前视频不存在！", "警告", {
          callback() {
            _this.$router.go(-1);
          },
        });
      }
    },
    login_up(link) {
      if (
        this.$cookies.get("token") == null ||
        this.$cookies.get("username") == null ||
        this.$cookies.get("ico") == null
      ) {
        this.$refs.child.pull_login();

        this.$notify({
          title: "请先登入",
          type: "warning",
          duration: 1500,
          // #结束事件
        });
      } else {
        window.open(link);
      }
    },

    get_course_data() {
      this.$axios({
        url: this.$settings.base_url + "/train/detail/" + this.course_id + "/",
        method: "get",
      })
        .then((response) => {
          this.course_info = response.data;
          this.char_list = this.course_info.detail_page.faq.split(";");
          this.playerOptions.sources[0].src = this.course_info.detail_page.video_link;
          this.link_list = this.course_info.detail_page.document_link.split(
            ";"
          );
          this.playerOptions.poster = this.course_info.detail_page.vcs;
          this.real = true;
        })
        .catch(() => {
          this.$notify({
            title: "对不起，访问页面出错！请联系陈鸿龙！",
            duration: 3000,
            type: "error",
          });
        });
    },
  },
  components: {
    Header,
    videoPlayer,
  },
};
</script>

<style scoped>
.main {
  background: #fff;
}

.course-info {
  width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  text-align: center;
  background-color: black;
  padding-left: 250px;
}

.wrap-left {
  float: left;
  width: 1000px;
  height: 500px;
  background-color: #000;
}

.course-tab {
  width: 100%;
  background: #fff;
  margin-bottom: 30px;
  box-shadow: 0 0 5px 0 #aaa;
}

.course-tab .tab-list {
  width: 1200px;
  margin: auto;
  color: #4a4a4a;
  overflow: hidden;
}

.tab-list li {
  float: left;
  margin-right: 15px;
  padding: 20px 20px 16px;
  font: 18px large;
  cursor: pointer;
  font-family: "Microsoft YaHei";
}

.tab-list .active {
  color: #ffc210;
  border-bottom: 2px solid #ffc210;
}

.course-content {
  width: 1800px;
  margin: 0 auto;
  background: white;
  overflow: hidden;
  padding-bottom: 40px;
}
.course-content .course-brief {
  width: 100%;
  font: 18px large;
  font-family: "Microsoft YaHei";
}

.course-tab-list {
  width: 1000px;
  margin-left: 110px;
  height: auto;
  padding: 20px;
  border-radius: 30px;
  color: #ffc210;
  border: 1px solid #ffc210 !important;
  float: left;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.tab-item span {
  font: 18px large;
  font-family: "Microsoft YaHei";
}
.tab-item span a {
  text-decoration: none;
  font: 18px large;
  font-family: "Microsoft YaHei";
}

.tab-item {
  width: 800px;
  background: #ffffff;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-left: 80px;
  color: #000;
}

.course-side {
  width: 300px;
  height: auto;
  margin-left: 20px;
  float: left;
}

.teacher-info {
  background: #fff;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px 0 #f0f0f0;
}

.side-title {
  font-weight: normal;
  font: 18px large;
  font-family: "Microsoft YaHei";
  padding: 18px 14px;
  border-bottom: 1px solid #333;
  border-bottom-color: rgba(51, 51, 51, 0.05);
}

.side-title span {
  display: inline-block;
  border-left: 2px solid #ffc210;
  padding-left: 12px;
}

.teacher-content {
  padding: 30px 20px;
  box-sizing: border-box;
}

.teacher-content .cont1 {
  margin-bottom: 12px;
  overflow: hidden;
}

.teacher-content .cont1 img {
  width: 54px;
  height: 54px;
  margin-right: 12px;
  float: left;
  border-radius: 10px;
}

.teacher-content .cont1 .name {
  float: right;
}

.teacher-content .cont1 .teacher-name {
  width: 188px;
  font: 18px large;
  font-family: "Microsoft YaHei";
  padding-bottom: 4px;
}

.teacher-content .cont1 .teacher-title {
  width: 188px;
  font-size: 13px;
  color: #9b9b9b;
  font-family: "Microsoft YaHei";
  white-space: nowrap;
}

.teacher-content .narrative {
  font-size: 16px;
  color: #666;
  font-family: "Microsoft YaHei";
  line-height: 24px;
}
</style>


